<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <title>test counter vanilla</title>
    <script type="text/javascript" src="node_modules/redux/dist/redux.min.js"></script>
</head>
<body>
    <div>
        <p>
            Clicked: <span id="value"></span> times
            <button id="increment">+</button>
            <button id="decrement">-</button>
            <button id="incrementIfOdd">Increment if odd</button>
            <button id="incrementAsync">Increment async</button>
        </p>
    </div>
    <script type="text/javascript">
        function counter(state=13,action){
            // if(typeof state === 'undefined'){
            //     return 0;
            // }
            switch (action.type){
                case 'INCREMENT':
                    return state+1;
                case 'DECREMENT':
                    return state-1;
                default:
                    return state;
            }
        }

        var store=Redux.createStore(counter);
        var valueEl=document.getElementById("value");

        function render(){
            valueEl.innerHTML=store.getState().toString();
        }
        render();
        store.subscribe(render);

        document.getElementById("increment")
        .addEventListener("click",function(){
            store.dispatch({type:"INCREMENT"})
        })
        document.getElementById("decrement")
        .addEventListener("click",function(){
            store.dispatch({type:"DECREMENT"})
        })
        document.getElementById("incrementIfOdd")
        .addEventListener("click",function(){
            if(store.getState()%2!==0){
                store.dispatch({type:"INCREMENT"})
            }
        })
        document.getElementById("incrementAsync")
        .addEventListener("click",function(){
            setTimeout(function(){
                store.dispatch({type:"INCREMENT"})
            },1000)
        })
    </script>
</body>
</html>